<template>
    <div class="select_class" style="background:#f6f6f6">
        <header style="margin-bottom:0.34666rem;" >
            <a @click="$api.goBack()" class="back"></a>
            <span>选择服务</span>
            <a class="add" @click="back()">确定</a>
        </header>
        <div class="row flex"  v-for="(item,index) in showData" style="padding-right:0.3rem;margin-bottom:0.3rem;" >
            <div class="checkbox_wrap"  >
                <span @click='checkedOrUnchecked(index)'>
                 <checkbox v-model="item.checked"></checkbox>
                </span>
            </div>    
            <div class="radio_right" >
                <div v-if="item.teacherPhoto" class="head">
                    <img  :src="item.teacherPhoto" />
                </div>
                <div class="classroom">
                    <div class="className" v-if="item.patternName" >{{item.patternName}}</div>
                    <div class="teacher" v-if="item.remark" >{{item.remark}}</div>
                </div>
                <div class="right flex_column" style="flex-grow: 1" >
                    <div class="price">
                        ￥{{item.patternPrice?item.patternPrice.toFixed(2):'null'}}
                    </div>
                </div>
            </div>                   
        </div>      
    </div>
    
</template>

<script>
    import {
        Actionsheet
    } from 'mint-ui';
    import checkbox from '../components/checkbox'
    import {
        MessageBox
    } from 'mint-ui';
    export default {
        data() {
            return {
                value: '1',
                selected: '1',
                title: '',
                pageSize: 1000000,
                pageNum: 1,
                showData: [],
                useInfo: '',
                selectId: '',
                teacherOption: {
                    title: '',
                    multiple: false, //是否允许多选
                    noEdit: false, //是否禁用选中
                },
                sheetVisible: false,
            }
        },
        methods: {
            checkedOrUnchecked(index) { //实现单选功能
                if (this.teacherOption.multiple) { //多选无视
                    return;
                }

                if (!this.showData[index].checked) { //拒绝取消选中,取消了再选回来,
                    this.showData[index].checked = !this.showData[index].checked
                } else { //如果不是取消选中,
                    this.$set(this, 'showData', this.showData.map((o, i) => {
                        if (index != i) { //除了要选中的,全部取消掉
                            o.checked = false;
                        }
                        return o;
                    }))
                }
            },
            getDetail() {
                var url = "/servicePattern/selectPage";
                var params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    schoolId: this.useInfo.schoolId,
                }
                this.$api.post(url, params, (data) => {
                    console.log(JSON.parse(JSON.stringify(data)))
                    data.info.list.forEach(element => {
                        if (element.servicePatternId == this.selectId) {
                            element.checked = true;
                        }
                        this.showData.push(element);
                    })
                })
            },
            getUseInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
            back() {
                var length = 0;
                this.showData.forEach((element, index) => {
                    if (element.checked) {
                        length = length + 1;
                        var options = {
                            item: element,
                            title: this.title,
                        }
                        sessionStorage.setItem('radioBackOptions', JSON.stringify(options));
                        this.$api.goBack();
                    };
                });
                if (length == 0) {
                    MessageBox('提示', '请选择!');
                }
            },
            getTitle() {
                this.teacherOption = JSON.parse(sessionStorage.getItem('teacherOption'))
                this.title = this.teacherOption.title;
                if (this.teacherOption.teacherIds) {
                    this.selectId = this.teacherOption.teacherIds
                }
            }
        },
        watch: {
            // showData: function(newValue) {
            //     newValue.forEach(element => {
            //         if (element.checked) {
            //             this.back();
            //         }
            //     })
            // }
        },
        created() {
            this.getTitle();
            this.getUseInfo();
            this.getDetail();

        },
        computed: {},
        components: {
            checkbox,
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .price {
        color: #FC5F51;
        text-align: right;
        font-size: 0.42333rem;
        padding-right: 0.13334rem;
        font-weight: bold;
    }
    
    .footer {
        height: 1.37333rem;
    }
    
    .footer .left {
        font-size: 0.38666rem;
        width: 7.22666rem;
        font-weight: bold;
        color: #010101;
        height: 100%;
        text-align: right;
        padding-right: 0.88rem;
        line-height: 1.37333rem;
    }
    
    .footer .right {
        flex-grow: 1;
        height: 100%;
    }
    
    .select_class .mint-navbar {
        background: white;
        color: #A5A5A5;
    }
    
    .select_class .mint-navbar .mint-tab-item.is-selected {
        border-bottom: 0.1rem solid #74beff;
        color: #0489ff;
        margin-bottom: 0px;
    }
    
    .classroom {
        padding-left: 0;
    }
    
    .topay {
        height: 100%;
        border: none;
        outline: none;
        font-size: 0.37333rem;
        color: white;
        background: #048Aff;
        width: 100%;
    }
</style>